<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <image class="back-icon" src="/static/jiantou2_1.png" @click="handleBack"></image>
      <text class="title">{{detailsofbilliards.name}}</text>
      <view class="right-space"></view>
    </view>

    <!-- 图表区域 -->
    <view class="chart-container">

      <view class="chart-data">
		  <text>订单总额（元）</text>
        <text class="total-amount">{{arrdata.total_fee}}</text>

      </view>
	  <view class="category-stats">
	    <view v-for="(item, index) in statItems" :key="index" class="stat-container">
<!-- 	      <view class="stat-item">
	      </view> -->
		   <view class="stat-label">{{ item.label }}</view>
<view class="progress-bar" v-if="index < statItems.length">
			  <view class="progress-fill" :style="{ width: item.progress + '%' }"></view>
			</view>
			 <view class="stat-value">{{ item.value }}</view>
	    </view>
	  </view>
    </view>

    <!-- 分类统计 -->


    <!-- 总计 -->
<!--    <view class="total-container">
      <text class="total-label">总计:</text>
      <text class="total-value">¥337.98</text>
    </view> -->

    <!-- 台桌消费 -->
    <view class="section">
		<view class="section-top">
      <view class="section-title">台桌消费</view>
	  <view class="section-text">
		  <view class="texts-gong">共计：</view>
		  <view class="texts-qian">${{statItems[1].value}}</view>
	  </view>
	  </view>
      <view class="section-content">
        <view class="bill-item">
          <image class="item-icon" src="/static/Group_427319158.png"></image>
          <view class="item-info">
            <view class="item-name">{{detailsofbilliards.name}}</view>
			<view class="item-tab">
				<view class="taba">中式</view>
				<view class="tabb">其他</view>
			</view>
			<view class="item-feng">$0.82元/分钟</view>
            <view class="item-time">{{arrdata.createtime}}</view>
          </view>
          <view class="item-amount">
            <text class="amount">¥{{detailsofbilliards.price}}</text>
			<text class="time">{{detailsofbilliards.duration}}分钟</text>
            <text class="status">进行中</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品消费 -->
    <view class="section">
      <view class="section-top">
      <view class="section-title">商品详情</view>
      <view class="section-text">
      		  <view class="texts-gong">共计：</view>
      		  <view class="texts-qian">${{statItems[2].value}}</view>
      </view>
      </view>
      <view class="section-content">
        <view class="bill-item" v-for="(item, index) in productItems" :key="index">
          <image class="item-icon" src="/static/Group_427319158.png"></image>
          <view class="item-info">
            <view class="item-name">{{item.item_name}}</view>
          			<view class="item-tab">
          				<view class="taba">中式</view>
          				<view class="tabb">其他</view>
          			</view>
          			<view class="item-feng">$0.82元/分钟</view>
            <view class="item-time">{{item.createtime}}</view>
          </view>
          <view class="item-amount">
            <text class="amount">{{item.item_price}}</text>
          			<text class="time">x{{item.quantity}}</text>
           
          </view>
        </view>
      </view>

    </view>

    <!-- 助教消费 -->
    <view class="section">
    <view class="section-top">
    <view class="section-title">助教详情</view>
    <view class="section-text">
    		  <view class="texts-gong">共计：</view>
    		  <view class="texts-qian">${{statItems[0].value}}</view>
    </view>
    </view>
      <view class="section-content">
        <view class="bill-item" v-for="(item, index) in tutorListdata" :key="index">
          <image class="item-icon" src="/static/Group_427319158.png"></image>
          <view class="item-info">
            <view class="item-name">{{item.item_name}}</view>
        	<view class="item-tab">
        		<view class="taba">中式</view>
        		<view class="tabb">其他</view>
        	</view>
        	<view class="item-feng">$0.82元/分钟</view>
            <view class="item-time">{{item.createtime}}</view>
          </view>
          <view class="item-amount">
            <text class="amount">¥{{item.item_price}}</text>
        	<text class="time">{{item.total_playing_time}}分钟</text>

          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
	import {getbillingdetail} from '../../../api/index.js'
	import store from '@/store'
export default {
  data() {
    return {
		detailsofbilliards:[],
		arrdata:[],
		tutorListdata:[],
      statItems: [
		   { label: '助教总额', value: '¥147.80', progress: 50 },
        { label: '台座总额', value: '¥147.80', progress: 44 },
        { label: '商品总额', value: '¥30.00', progress: 9 },
       
      ],
      productItems: [
        {
          name: '东方树叶',
          price: '¥14.80',
          quantity: 1,
          time: '2025-06-25 20:20:19',
          image: '/static/Group_427319161.png'
        },
        {
          name: '东方树叶',
          price: '¥14.80',
          quantity: 1,
          time: '2025-06-25 20:20:19',
          image: '/static/Group_427319161.png'
        }
      ]
    };
  },
 async onLoad(option) {
  	console.log(option.id);
	let res=await getbillingdetail({shopid:store.state.user.userInfo.id,id:option.id});
	this.arrdata=res.data.data;
	this.statItems[0].value=res.data.data.tutor_fee;
	this.statItems[1].value=res.data.data.billing_fee;
	this.statItems[2].value=res.data.data.goods_fee;
	this.detailsofbilliards=res.data.data.snapshoot;
	this.tutorListdata=res.data.data.tutorList;
	this.productItems=res.data.data.goodsList;
	
	console.log('xiangqing',res.data.data);
	
  },
  methods: {
    // 处理返回按钮点击事件
    handleBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  // background-color: #f5f5f5;
  background-image: url('/static/Group_427319262.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 120rpx;
}

// 顶部导航栏
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120rpx;
  width:750rpx;
  background-image: url('/static/Group_427319262.png');
  background-size: cover;
  // background-position: center;
  background-repeat: no-repeat;
  // background-color: #4cd964;
  box-sizing: border-box;
  padding: 0 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .back-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .title {
    font-size: 40rpx;
    color: #000;
    font-weight: bold;
  }

  .right-space {
    width: 40rpx;
  }
}

// 图表区域
.chart-container {
	  margin: 0 20rpx;
	  
  margin-top: 120rpx;
  box-sizing: border-box;
  padding: 32rpx;

 width: 710rpx;
 height: 560rpx;
 background: #FFFFFF;
 border-radius: 16rpx 16rpx 16rpx 16rpx;

  .chart-bg {
    width: 100%;
    height: 400rpx;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20rpx;
    opacity: 0.2;
  }

  .chart-data {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;

    .total-amount {
      font-size: 64rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 40rpx;
    }

    .chart-legend {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 40rpx;

      .legend-item {
        display: flex;
        align-items: center;

        .legend-color {
          width: 24rpx;
          height: 24rpx;
          border-radius: 6rpx;
          margin-right: 10rpx;
        }

        .blue {
          background-color: #5ac8fa;
        }

        .green {
          background-color: #4cd964;
        }

        .orange {
          background-color: #ff9500;
        }

        .legend-text {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
}

// 分类统计
.category-stats {
  display: flex;
  // flex-direction: column;
  justify-content: space-around;
  // padding: 40 32rpx;
  // margin-bottom: 30rpx;
box-sizing: border-box;
  .stat-container {
    // display: flex;
    // align-items: center;
    // margin-bottom: 20rpx;
width: 204rpx;
background: rgba(30,190,118,0.1);
height: 178rpx;
padding: 18rpx 16rpx;
box-sizing: border-box;
border-radius: 16rpx;
position: relative;
    // .stat-item {
    //   width: 280rpx;
    //   background-color: #fff;
    //   margin-right: 20rpx;
    //   padding: 30rpx 0;
    //   border-radius: 16rpx;
    //   display: flex;
    //   flex-direction: column;
    //   align-items: center;
    //   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    //   position: relative;
    //   overflow: hidden;


    // }
	  &::before {
	    content: '';
	    position: absolute;
	    top: 28rpx ;
	    left: 16rpx;
	    width: 20rpx;
	    height: 20rpx;
	    border-radius: 50%;
	    background-color: #4cd964;
	  }
	
	  .stat-label {
		  // margin-top: -10rpx;
		  margin-left: 26rpx;
	    font-size: 24rpx;
		font-weight: bold;
	    color: #454545;
	    margin-bottom: 38rpx;
	  }
	
	  .stat-value {
		  margin-top: 16rpx;
	    font-size: 24rpx;
	    font-weight: bold;
	    color: #333;
	  }
    .progress-bar {
		// overflow: hidden;
		width: 176rpx;
		height: 12rpx;
      flex: 1;
      // height: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background-color: #4cd964;
        border-radius: 10rpx;
        transition: width 0.5s ease;
      }
    }

  }
}

// 总计
.total-container {
  background-color: #fff;
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .total-label {
    font-size: 32rpx;
    color: #333;
  }

  .total-value {
      font-size: 40rpx;
      font-weight: bold;
      color: #4cd964;
    }
}

//  sections 通用样式
.section {
	margin: 0 20rpx;
	width: 710rpx;
	padding: 32rpx;
	box-sizing: border-box;
  background-color: #fff;
  margin-top: 20rpx;
  // margin: 0 30rpx 30rpx;
  // border-radius: 16rpx;
  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	
.section-top{
	display: flex;
	justify-content: space-between;
	padding-bottom: 34rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #ccc;
  .section-title {
    font-size: 32rpx;
    color: #1A1A1A;
     font-weight: bold;
  }
  .section-text{
	  display: flex;
	  .texts-gong{
		color:  #666666; 
		  font-size: 28rpx;
	  }
	  .texts-qian{
		  color: #FF7D12;
		    font-size: 28rpx;
	  }
  }
}



  .section-content {
    padding: 24rpx 0 0 0;
	box-sizing: border-box;
  }

  .section-total {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #f0f0f0;

    .total-label {
      font-size: 28rpx;
      color: #333;
    }

    .total-value {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff3b30;
    }
  }
}

// 消费项通用样式
.bill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 20rpx 0 0 0;
  // border-bottom: 1rpx solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }

  .item-icon {
    width: 160rpx;
    height: 160rpx;
    margin-right: 24rpx;
  }

  .product-image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
  }

  .assistant-image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .item-info {
    flex: 1;

    .item-name {
      font-size: 28rpx;
	  font-weight: bold;
      color: #333;
      margin-bottom: 6rpx;
    }
	.item-tab{
		display: flex;
		.taba{
			width: 54rpx;
			height: 28rpx;
			font-size: 20rpx;
			color: #1EBE76;
			text-align: center;
			line-height: 28rpx;
			background: rgba(30,190,118,0.18);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #1EBE76;
		}
		.tabb{
			font-size: 20rpx;
			width: 54rpx;
			height: 28rpx;
			color: #A2A2A2;
			line-height: 28rpx;
			text-align: center;
			background: rgba(174,174,174,0.18);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #C4C4C4;
		}
	}
.item-feng{
	margin-top: 6rpx;
	font-size: 16rpx;
	color: #454545;
}
    .item-time {
		margin-top: 24rpx;
      font-size: 20rpx;
      color: #999;
    }
  }

  .item-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .amount {
     font-weight: 600;
     font-size: 24rpx;
      margin-bottom: 2rpx;
    }
          .time{
			  font-size: 24rpx;
			  color: #666666;
		  }
    .status {
      font-size: 24rpx;
      color: #8C621A;
      text-align: center;
	  line-height: 38rpx;
	  width: 104rpx;
	  height: 38rpx;
	  margin-top: 40rpx;
	  background: linear-gradient( 90deg, #FFDC84 0%, #FDBC61 100%);
    }

    .quantity {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>